<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="./img/logo_0.png">
    <link rel="stylesheet" href="./css/register.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2248239_v80b6yhmv5k.css">
    <title>华为注册</title>
</head>

<body>
    <!-- 头部 -->
    <div class="customer-top">
        <div class="container">
            <h2 class="logo">
                <img src="./img/logo_0.png" alt="">
            </h2>
            <span class="headTitle"><a href="./vamll.html">华为商城</a>
                </span>
        </div>
    </div>
    <!-- 注册 -->
    <div class="register-main">
        <div class="container">
            <div class="register-selected">
                <i class="iconfont icon-phone"></i>
                <span>手机号注册</span>
            </div>
            <div class="registerTitle">
                <div class="mainTitle">
                    <span>华为账号注册</span>
                </div>
                <div class="login-link">
                    <span class="text">已有帐号，</span>
                    <div class="link">
                        <span class="loginBtn">去登录</span>
                        <span class="iconfont icon-jiantou"></span>
                    </div>
                </div>
                <div class="input-msgCode">
                    <div class="userDiv">
                        <input type="text" class="user" placeholder="用户名">
                        <div class="tipSpan">
                            <p>用户名需满足以下要求:</p>
                            <p>1. 用户名长度6~12个字符</p>
                            <p>
                                2. 用户名以大小写字母、数字以及下划线组成,且不能以数字开头
                            </p>
                            <span></span>
                        </div>
                        <p class="userSpan">
                            <i></i>
                            <span class="error"></span>
                        </p>
                    </div>
                    <div class="pwdDiv">
                        <input type="password" class="pwd" placeholder="密码">

                        <div class="tipSpan">
                            <p>密码需满足以下要求:</p>
                            <p>至少含有8个字符</p>
                            <p>
                                密码有大小写字母、数字以及下划线组成
                            </p>
                            <div class="strength">
                                密码强度
                            </div>
                            <div class="color"></div>
                            <span></span>
                        </div>
                        <p class="pwdSpan">
                            <i></i>
                            <span class="error"></span>
                        </p>
                        <div class="eye p-eye"></div>
                    </div>
                    <div class="repwdDiv">
                        <input type="password" class="repwd" placeholder="确认密码">
                        <p class="repwdSpan">
                            <i></i>
                            <span class="error"></span>
                        </p>
                        <div class="eye r-eye"></div>
                    </div>
                    <div class="phoneDiv">
                        <input type="text" class="phone" placeholder="手机号">
                        <p class="phoneSpan">
                            <i></i>
                            <span class="error"></span>
                        </p>
                    </div>
                    <div class="emailDiv">
                        <input type="text" class="email" placeholder="邮箱">
                        <p class="emailSpan">
                            <i></i>
                            <span class="error"></span>
                        </p>
                    </div>
                    <button class="registerBtn">注册</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部  -->
    <div class="footer">
        <div class="container">
            <div class="warrant-area">
                <p>
                    <a href="javascript:;">华为帐号用户协议</a>
                    <em class="footer-em">|</em>
                    <a href="javascript:;">关于华为帐号与隐私的声明</a>
                    <em class="footer-em">|</em>
                    <a href="javascript:;">常见问题</a>
                    <em class="footer-em">|</em>
                    <a href="javascript:;">Cookies</a>
                </p>
                <p>
                    华为帐号 版权所有 © 2011-2021
                </p>
            </div>
        </div>
    </div>
</body>

</html>